<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
    <style>

        /* ----------------------------------------------------------------------------------------------------------*/
        /* NavCubePlugin */
        /* ----------------------------------------------------------------------------------------------------------*/

        #myNavCubeCanvas {
            position: absolute;
            width: 250px;
            height: 250px;
            bottom: 50px;
            right: 10px;
            z-index: 200000;
        }

        .xeokit-camera-pivot-marker {
            color: #ffffff;
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            border: 2px solid #ebebeb;
            background: black;
            visibility: hidden;
            box-shadow: 5px 5px 15px 1px #000000;
            z-index: 10000;
            pointer-events: none;
        }
    </style>
</head>

<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<canvas id="myNavCubeCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/bim_icon.png"/>
    <h1>XKTLoaderPlugin</h1>
    <h2>Loading a BIM model and point cloud with 2.6M points</h2>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Align and customize point cloud</h3>
    <div id="myDatGuiContainer"></div>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PointsMaterial.js~PointsMaterial.html"
               target="_other">PointsMaterial</a>
        </li>
    </ul>
    <h3>Tutorials</h3>
    <ul>
        <li>
            <a href="https://www.notion.so/xeokit/Dynamically-Repositioning-Models-87c61be0018e40adb498609ee56b8d0c"
               target="_other">Dynamically Repositioning Models</a>
        </li>
    </ul>
    <h3>Assets</h3>
    <ul>
        <li>Models provided by <a href="https://bimdata.io" target="_other">BIMData.io</a></li>
    </ul>

</div>
</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        math,
        Viewer,
        XKTLoaderPlugin,
        WebIFCLoaderPlugin,
        LASLoaderPlugin,
        NavCubePlugin
    } from "../../dist/xeokit-sdk.min.es.js";
    import * as WebIFC from "https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/web-ifc-api.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer, arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    new NavCubePlugin(viewer, {
        canvasId: "myNavCubeCanvas",
        visible: true,
        size: 250,
        alignment: "bottomRight",
        bottomMargin: 100,
        rightMargin: 10
    });


    viewer.scene.camera.eye = [-33.39, 19.86, 16.48];
    viewer.scene.camera.look = [8.29, 8.28, 0.31];
    viewer.scene.camera.up = [0.23, 0.96, -0.09];

    viewer.cameraControl.navMode = "orbit";
    viewer.cameraControl.followPointer = true;

    const pivotElement = document.createRange().createContextualFragment("<div class='xeokit-camera-pivot-marker'></div>").firstChild;
    document.body.appendChild(pivotElement);
    viewer.cameraControl.pivotElement = pivotElement;

    //------------------------------------------------------------------------------------------------------------------
    // Configure points material
    //------------------------------------------------------------------------------------------------------------------

    viewer.scene.pointsMaterial.pointSize = 2;
    viewer.scene.pointsMaterial.roundPoints = true;
    viewer.scene.pointsMaterial.perspectivePoints = true;
    viewer.scene.pointsMaterial.minPerspectivePointSize = 2;
    viewer.scene.pointsMaterial.maxPerspectivePointSize = 4;

    //----------------------------------------------------------------------------------------------------------------------
    // Load IFC and LAS models
    //----------------------------------------------------------------------------------------------------------------------

    const IfcAPI = new WebIFC.IfcAPI();

    IfcAPI.SetWasmPath("https://cdn.jsdelivr.net/npm/web-ifc@0.0.51/");

    IfcAPI.Init().then(() => {

        const webIfcLoader = new WebIFCLoaderPlugin(viewer, {
            WebIFC,
            IfcAPI
        });

        const bimSceneModel = webIfcLoader.load({
            id: "myModel",
            src: "../../assets/models/las/example-no-1.ifc",
            edges: true
        });

    });

    const lasLoaderPlugin = new LASLoaderPlugin(viewer, {
        rotate: [-90, 0, 0] // Bake rotation into LAS points as they are loaded
    });

    const lasSceneModel = lasLoaderPlugin.load({
        id: "myModel2",
        src: "../../assets/models/las/example-no-1.laz"
    });

    //------------------------------------------------------------------------------------------------------------------
    // GUI to play with points material properties
    //------------------------------------------------------------------------------------------------------------------

    const pointsMaterial = viewer.scene.pointsMaterial;
    const camera = viewer.camera;

    var guiParams = new function () {
        this.positionX = 0;
        this.positionY = 0;
        this.positionZ = 0;
        this.roundPoints = pointsMaterial.roundPoints;
        this.perspectivePoints = pointsMaterial.perspectivePoints;
        this.pointSize = pointsMaterial.pointSize;
        this.minPerspectivePointSize = pointsMaterial.minPerspectivePointSize;
        this.maxPerspectivePointSize = pointsMaterial.maxPerspectivePointSize;
        this.perspective = (camera.projection === "perspective");
    }();

    var update = function () {
        lasSceneModel.position = [
            guiParams.positionX,
            guiParams.positionY,
            guiParams.positionZ
        ];
        pointsMaterial.roundPoints = guiParams.roundPoints;
        pointsMaterial.perspectivePoints = guiParams.perspectivePoints;
        pointsMaterial.pointSize = guiParams.pointSize;
        pointsMaterial.minPerspectivePointSize = guiParams.minPerspectivePointSize;
        pointsMaterial.maxPerspectivePointSize = guiParams.maxPerspectivePointSize;
        camera.projection = guiParams.perspective ? "perspective" : "ortho";
        requestAnimationFrame(update);
    };

    update();

    const gui = new dat.GUI({autoPlace: false, width: "100%"});

    const lasPositionFolder = gui.addFolder('LAS Position');
    gui.add(guiParams, 'positionX', -50, 50).onChange(update);
    gui.add(guiParams, 'positionY', -50, 50).onChange(update);
    gui.add(guiParams, 'positionZ', -50, 50).onChange(update);
    lasPositionFolder.open();

    const pointsMaterialFolder = gui.addFolder('PointsMaterial');
    pointsMaterialFolder.add(guiParams, 'roundPoints');
    pointsMaterialFolder.add(guiParams, 'perspectivePoints');
    pointsMaterialFolder.add(guiParams, 'pointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'minPerspectivePointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'maxPerspectivePointSize', 1, 50);
    pointsMaterialFolder.open();

    const cameraFolder = gui.addFolder('Camera');
    cameraFolder.add(guiParams, 'perspective');
    cameraFolder.open();

    var customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);

    window.viewer = viewer;

</script>
</html>